<template>
  <el-dialog center title="提货地址修改" :visible.sync="innerVisible" width="800px">
    <el-form v-loading="dialogLoading" :model="model" :label-position="labelPosition" ref="ruleForm"
             label-width="120px">
      <el-row :gutter="15">
        <el-col :span="10" :offset="1">
          <el-form-item label="提货联系人" prop="pickUpName" :rules="[
                    { required: true, message: '请输入提货联系人', trigger: 'blur' },
                  ]">
            <el-input v-model="model.pickUpName" placeholder="请输入提货联系人" style="position:relative;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="提货联系电话" prop="pickUpPhone" :rules="[
            { required: true, message: '请输入提货联系电话', trigger: 'blur' },
            {validator: isPhoneOrTel, message: '请输入正确的提货联系电话', trigger: 'blur'}
          ]">
            <el-input v-model="model.pickUpPhone" placeholder="请输入提货电话" style="position:relative;"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="10" :offset="1">
          <el-form-item label="是否到货" prop="doArrive" :rules="[
                    {required: true, message: '是否到货必须', trigger: 'blur'}
                  ]">
            <el-switch
              v-model="model.doArrive"
              active-value="1"
              inactive-value="0"
              active-text="是"
              inactive-text="否">
            </el-switch>
          </el-form-item>
        </el-col>

        <el-col :span="10">
          <el-form-item label="预计提货" prop="predictDevliveryDate">
            <el-date-picker :picker-options="pickerOptions" type="date" placeholder="选择年月日"
                            v-model="model.predictDevliveryDate"
                            value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="20" :offset="1">
          <el-form-item label="提货地址:" prop="addressArr" :rules="[
                    { required: true, message: '请选择提货省市区', trigger: 'change' },
                  ]">
            <cascade-address v-model="model.addressArr" :level="3" placeholder="请选择省市区"></cascade-address>
          </el-form-item>
        </el-col>
        <el-col :span="20" :offset="1">
          <el-form-item label="详细地址:" prop="pickUpAddress" :rules="[
            { required: true, max: 200, message: '请输入详细地址', trigger: 'blur' },
          ]">
            <el-input type="textarea" maxlength="200" :rows="3" v-model="model.pickUpAddress"
                      placeholder="允许输入200字内"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20" :offset="1">
          <el-form-item label="提货备注:" prop="pickUpMemo">
            <el-input type="textarea" maxlength="200" :rows="3" v-model="model.pickUpMemo"
                      placeholder="允许输入200字内"></el-input>
          </el-form-item>
        </el-col>
        <el-col class="text-center" :span="24">
          <el-row>
            <el-col class="text-center" :span="5" :offset="6">
              <el-button @click="innerVisible = false" style="width:100%">取消</el-button>
            </el-col>
            <el-col class="text-center" :span="5" :offset="2">
              <el-button type="primary" :loading="loading" @click="submit" style="width:100%">保存</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
import {dotData, copy, confirm} from '@/utils'
import CascadeAddress from '@/components/CascadeAddress'
import {isPhoneOrTel} from '@/utils/validate'
import {unixTimestampFilter} from '@/filters'
import moment from 'moment'

export default {
  components: {
    CascadeAddress
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    detail: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  watch: {
    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      if (val) {
        // 重置表单
        this.resetFields()
        // 赋值
        this.setModelData()
      }
      this.innerVisible = val
    },
    // 如果内部有新值变化，更新外部visible
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    }
  },
  data() {
    return {
      innerVisible: this.visible,
      labelPosition: 'left',
      model: {
        pickUpName: '',
        pickUpPhone: '',
        addressArr: [],
        pickUpAddress: '',
        predictDevliveryDate: '',
        doArrive: '',
        pickUpMemo: ''
      },
      callBackData: {},
      detailData: {},
      loading: false,
      dialogLoading: false,
      pickerOptions: {
        disabledDate(time) {
          return moment(time).isBefore(Date.now(), 'day')
        }
      }
    }
  },
  computed: {
    title() {
      if (this.id) {
        return '编辑'
      } else {
        return '添加新的地址'
      }
    },
    chOrder() {
      return dotData(this.detail, 'chOrder')
    },
    id() {
      return dotData(this.chOrder, 'id')
    }
  },
  methods: {
    isPhoneOrTel,
    // 修改时，http请求出该id 的详情数据 并回填
    submit($event) {
      this.$refs['ruleForm'].validate((valid) => {
        if (!valid) {
          return
        }
        let submitData = copy(this.model, true)
        submitData.pickUpProvinceNo = submitData.addressArr[0]
        submitData.pickUpCityNo = submitData.addressArr[1]
        submitData.pickUpDistrictNo = submitData.addressArr[2]
        delete submitData.addressArr // 收件地址
        submitData.orderId = this.id
        let title = '修改成功'
        this.loading = true
        this.$ajax.post('/ms-terminal-order/user-pick-up/modify-pick-up', submitData).then(response => {
          const success = dotData(response, 'success')
          this.loading = false
          if (success) {
            this.$emit('refresh', true)
            confirm(title, '提示', {
              type: 'success',
              confirmButtonText: '确定',
              showCancelButton: false
            }).then(_ => {
              this.innerVisible = false
              this.$emit('refresh', true)
            })
          }
        }).finally(_ => {
          this.loading = false
        })
      })
    },
    resetFields() {
      if (this.$refs['ruleForm']) {
        this.$refs['ruleForm'].resetFields()
      }
    },
    // 设置值
    setModelData() {
      // arriveState: 1： 部分到货 2: 已到货 0： 未到货
      this.model.pickUpName = dotData(this.chOrder, 'pickUpName') || ''
      this.model.pickUpPhone = dotData(this.chOrder, 'pickUpPhone') || ''
      this.model.addressArr = dotData(this.chOrder, 'pickUpName') || ''
      const arriveState = dotData(this.chOrder, 'arriveState')
      switch (parseInt(arriveState)) {
        case 2:
          this.model.doArrive = '1'
          break
        case 0:
          this.model.doArrive = '0'
          break
      }
      const addressArr = []
      if (dotData(this.chOrder, 'pickUpProvinceNo')) {
        addressArr.push(dotData(this.chOrder, 'pickUpProvinceNo'))
        if (dotData(this.chOrder, 'pickUpCityNo')) {
          addressArr.push(dotData(this.chOrder, 'pickUpCityNo'))
          if (dotData(this.chOrder, 'pickUpDistrictNo')) {
            addressArr.push(dotData(this.chOrder, 'pickUpDistrictNo'))
          }
        }
      }
      this.model.addressArr = addressArr
      this.model.pickUpAddress = dotData(this.chOrder, 'pickUpAddress')
      this.model.predictDevliveryDate = dotData(this.chOrder, 'predictDevliveryDate') ? unixTimestampFilter(dotData(this.chOrder, 'predictDevliveryDate')) : ''
      this.model.pickUpMemo = dotData(this.chOrder, 'pickUpName') || ''
    }
  }
}
</script>
